<template>
    <div class="container">
        <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading" @change="handleTableChange">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                    <span>
                        <a-button type="link" @click="handleUpdate(record)">修改</a-button>
                        <a-divider type="vertical" />
                        <template v-if="record.preset">
                            <a-tooltip>
                                <template #title>系统预设数据不允许删除</template>
                                <a-button type="link" disabled>删除</a-button>
                            </a-tooltip>
                        </template>
                        <template v-else>
                            <a-popconfirm title="确认删除此条数据？" ok-text="确认" cancel-text="取消" @confirm="handleConfirmDelete(record)">
                                <a-button type="link" class="warning">删除</a-button>
                            </a-popconfirm>
                        </template>
                    </span>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Api
import Api from '@/axios/api/sys/dict';
// Component
import { message } from 'ant-design-vue';
import Icon from '@/component/common/Icon.vue';
// Model
import { PageQuery, Result } from '@/model/common';
import { DictQuery, DictListDTO } from '@/model/sys/dict';
// Plugin
import { Bus, BusEvent } from '@/plugin';

// 定义事件
const emit = defineEmits(['update']);

// 变量
const loading = ref<boolean>(false);
let pageQuery = new PageQuery();
let query = new DictQuery();
const columns = DictListDTO.columns;
const dataSource = ref<DictListDTO[]>([]);

const pagination = ref({
    showQuickJumper: true,
    showSizeChanger: true,
    total: 0,
    showTotal: (total: number) => {
        return `共${total}条`;
    },
});

onMounted(() => {
    Bus.on(BusEvent.REFRESH_DICT, (_query: any) => {
        if (_query) {
            query = _query;
        }
        refresh();
    });
});

// 方法

/**
 * 刷新列表
 */
const refresh = () => {
    loading.value = true;
    Api.pageList(query, pageQuery)
        .then((res: Result) => {
            dataSource.value = res.data.data;
            pagination.value.total = Number(res.data.total);
        })
        .finally(() => {
            loading.value = false;
        });
};

/**
 * 分页参数改变事件
 */
const handleTableChange = (pagination: any) => {
    pageQuery = new PageQuery(pagination.current, pagination.pageSize);
    refresh();
};

/**
 * 点击更新按钮事件
 */
const handleUpdate = (record: DictListDTO) => {
    emit('update', record);
};

/**
 * 确认删除事件
 */
const handleConfirmDelete = (record: DictListDTO) => {
    loading.value = true;
    Api.delete(record.dictId)
        .then(() => {
            message.success('删除成功。');
            refresh();
        })
        .catch((err: Result) => {
            message.error(`删除失败。${err.msg}`);
        })
        .finally(() => {
            loading.value = false;
        });
};

// 定义组件对外暴露的内容
defineExpose({
    refresh,
});
</script>

<style lang="less" scoped>
.container {
    .ant-table {
        .ant-btn-link {
            padding: 0;
            height: unset;
            border: unset;

            &.warning {
                color: @warning-color;
            }
        }
    }
}
</style>
